<template>
  <div id="mainTextPage">
    <div class="title"><i class="iconfont icon-icon1"></i>欢迎来到全宇支付平台</div>
    <!--实线-->
    <div class="solid"></div>
    <div class="main_content">
      <div class="section1">
        <h4><i class="iconfont icon-data" style="margin: 0 20px;"></i>今日数据</h4>
        <el-row>
          <el-col :span="10">
            <div class="account">
              <div class="item" style="font-size: 25px;"><span v-text="userInfo.balance">0</span>￥</div>
              <div class="item" style="margin-top: 6px;">账户余额<i class=""></i></div>
            </div>
          </el-col>
          <el-col :span="14">
            <div class="detail">
              <div class="item item1">
                <div class="div1 flexColoum">
                  <div>成功金额</div>
                  <div><b v-text="userInfo.successMoney">0</b></div>
                  <div><b>￥</b></div>
                </div>
                <div class="div2 flexColoum">
                  <div>成功笔数</div>
                  <div><b v-text="userInfo.successNumber">0</b></div>
                  <div><b><i class="iconfont icon-money"></i></b></div>
                </div>
              </div>
              <div class="item item2 flexColoum">
                <div>处理中笔数</div>
                <div class="green"><b v-text="userInfo.dealNumber">0</b></div>
                <i class="el-icon-loading"></i>
                <div>处理中金额</div>
                <div class="green"><b v-text="userInfo.dealMoney">0</b></div>
              </div>
              <div class="item item3 flexColoum">
                <div>冻结金额</div>
                <div class="red"><b v-text="userInfo.lockMoney">0</b></div>
                <i class="el-icon-circle-cross red"></i>
                <div>失败金额</div>
                <div class="red"><b v-text="userInfo.failMoney">0</b></div>
              </div>
            </div>
          </el-col>

        </el-row>
        <el-row>
          <!--<el-col :span="12" id="myChart"></el-col>
                    <el-col :span="12" id="myChart2"></el-col>-->
          <table border="1" cellspacing="0" cellpadding="0">

            <tr v-for="item in tableInfo">
              <th>通道</th><td>{{item.channel}}</td>
              <th>结算方式</th><td>{{item.settlementType}}</td>
              <th>费率</th><td>{{item.tariff}}</td>
              <th>支付类型</th><td>{{item.type}}</td>
            </tr>

          </table>
        </el-row>

      </div>
      <div class="section2">
        <div class="title">最新消息<span><!--1条未读--></span></div>
        <ol class="newsitem">

          <li class="item" v-for="item in noticeList">

            <div class="div1">
              <span style="color: blue;">全宇支付</span>
            </div>
            <div class="div2" @click="getMesId(item.id)" title="点击查看具体消息" v-text="item.title">

            </div>
            <div class="div3">
              <span style="white-space: nowrap;" v-text="item.date"></span>
            </div>

          </li>
        </ol>
        <div v-show="noMes">已经没有更多的通知了</div>
        <div class="button_box">
          <button @click="loadMore"><i :class="{'el-icon-caret-bottom':isActive1,'el-icon-loading':isActive2}"></i>加载更多
          </button>
        </div>
        <el-dialog title="具体消息" :visible.sync="dialogVisible" size="small" style="text-align:left">
          <span v-text="content"></span>
          <span slot="footer" class="dialog-footer">

                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
        </el-dialog>
      </div>
    </div>

  </div>
</template>

<script>
  import dateformat from 'dateformat'

  export default {
    data() {
      return {
        userInfo: {},
        dialogVisible: false,
        loading1: true,
        isActive1: true,
        isActive2: false,
        tafiffList: {},
        noticeList: [],
        content: '',
        pageSize:8,
        pageNumber:1,
        noMes:false,
        tableInfo:[]

      }
    },
    mounted() {
      //			this.drawLine();

    },
    created() {
      this.getAllMes();
      this.getIndexInfo();
      let username = sessionStorage.getItem("username");
      this.getchannels()
    },
    methods: {
      getchannels(){
         this.$api.getchannels().then(res =>{
           if(res.data.code == '000000'){
             console.log(res.data);
             this.tableInfo = res.data.data;
             console.log(this.tableInfo)
             this.tableInfo.forEach(item =>{
               switch (item.settlementType){
                 case 3:item.settlementType = 'D0';break;
                 case 4:item.settlementType = 'T0';break;
                 case 5:item.settlementType = 'D1';break;
                 case 6:item.settlementType = 'T1';break;
                 default:break;
               }

             })

           }
         })
      },
      getAllMes() {
        let params = {
          pageSize: this.pageSize,
          pageNumber: this.pageNumber
        }
        this.$api.getAllMes(params).then(res => {
          if (res.data.code == '000000') {
            console.log(res.data);
            this.noticeList = res.data.data.list;
            this.$message({
              type:'success',
              message:'消息加载成功'
            })
            if( res.data.data.list.length < this.pageSize){
              this.noMes= true;
            }
            this.noticeList.forEach(item => {
              let date = new Date(item.date);
              item.date = dateformat(date, 'yyyy-mm-dd')
            })
          } else {
            this.message.error("获取通知信息失败")
          }
        }).catch()
      },
      getMesId(id) {
        this.content = '';
        this.dialogVisible = true;
        this.$api.getMesId(id).then(res => {
          if (res.data.code == '000000') {
            console.log(res.data);
            this.content = res.data.data.content
          }
        })
      },
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'));
        let myChart2 = this.$echarts.init(document.getElementById('myChart2'));
        // 绘制图表
        myChart.setOption({
          title: {
            text: ''
          },
          type: 'line',
          tooltip: {},
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }]
        });
        myChart2.setOption({
          title: {
            text: ''

          },

          tooltip: {
            trigger: 'axis'
          },

          calculable: true,
          xAxis: [{
            type: 'category',
            boundaryGap: false,

            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }],
          yAxis: {},
          series: [{
            //							name: '最高气温',
            type: 'line',
            data: [5, 3, 6, 7, 4, 6, 4],

          }

          ]
        });
      },

      getIndexInfo() {
        let _this = this;
        this.$api.getIndexInfo().then(function (res) {

          if (res.data.code == '000000') {
            _this.userInfo = res.data.data;
            _this.$emit("userStatus", 'success');
            sessionStorage.setItem("ip", res.data.data.ip);

            for (let item in _this.userInfo) {

              if (item == 'channel') {
                _this.tafiffList['通道名称'] = _this.userInfo[item];
              }
              if (item == 't') {
                _this.tafiffList['结算周期'] = _this.userInfo[item];
              }
              if (item == 'tariffAliCode') {
                _this.tafiffList['支付宝扫码费率'] = _this.userInfo[item];
              }
              if (item == 'tariffAliWap') {
                _this.tafiffList['支付宝wap费率'] = _this.userInfo[item];
              }
              if (item == 'tariffJd') {
                _this.tafiffList['京东费率'] = _this.userInfo[item];
              }
              if (item == 'tariffQq') {
                _this.tafiffList['QQ费率'] = _this.userInfo[item];
              }
              if (item == 'tariffQuickBank') {
                _this.tafiffList['快捷支付费率'] = _this.userInfo[item];
              }
              if (item == 'tariffWxCode') {
                _this.tafiffList['微信扫码费率'] = _this.userInfo[item];
              }
              if (item == 'tariffWxH5') {
                _this.tafiffList['微信h5费率'] = _this.userInfo[item];
              }
            }
            console.log(_this.tafiffList)

          } else {
            _this.$message.error("获取用户信息失败！");
            _this.$emit("userStatus", 'error');
          }
        }).catch(function () {
          _this.$message.error("获取用户信息失败！");
          _this.$emit("userStatus", 'error')
        })
      },
      getPermissionList() {
        this.$api.getPermissionList().then(function (res) {
          console.log(res)
        })
      },
      loadMore() {
          this.isActive1 = false,
          this.isActive2 = true;
          this.pageSize+=10;
          this.getAllMes();

        setTimeout(() => {
          this.isActive1 = true,
            this.isActive2 = false;
        }, 2000)
      },

    }
  }
</script>

<style lang="less">
  @import url("../../../static/icon1/iconfont.css");

  #mainTextPage {
    background-color: #f3f3f4;
    padding: 29px;
    .green {
      color: green !important;
    }
    .red {
      color: red !important;
    }
    .flexColoum {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
    .icon-icon1 {
      font-size: 35px !important;
      margin-right: 35px;
      position: absolute;
      color: #008000;
      right: 200px;
      bottom: -8px;
    }
    .icon-data {
      font-size: 20px;
    }
    .title {
      text-align: right;
      font-size: 12px;
      margin-bottom: 10px;
      position: relative;
    }
    .solid {
      background-color: black;
      height: 2px;
    }
    .main_content {
      padding: 30px 0;
      display: flex;
      justify-content: space-around;
      .section1 {
        min-width: 420px;
        width: 50%;
        flex-shrink: 1;
        height: 450px;
        background-color: #fff;
        margin-right: 50px;
        border-radius: 5px;
        padding: 10px 40px;
        .account {
          width: 95%;
          height: 130px;
          background-color: #00bbee;
          color: white;
          display: flex;
          flex-direction: column;
          justify-content: center;
          text-align: left;
          padding-left: 15px;
          border: 1px solid #ccc;
        }
        table {
          width: 100%;
          margin: auto;
          /*min-width: 360px;*/
          margin-top: 30px;
          /*display: flex;*/
          flex-wrap: wrap;
          border: 1px solid #ccc;
          text-align: center;
          border-color: #b9c2cb;
          color: #4F4D4D;
          background-color: #FFF;
          border-collapse: collapse;
          font-size: 14px;
          div {
            /*width: 50%;*/
            /*display: flex;*/
          }
          tr{
            width: 100%;
          }
          th {
            background-color: #edf4fe;
            height: 40px;

            /*width: 50%;*/

            line-height: 40px;
          }
          td {
            color: red;

            line-height: 40px;
            height: 40px;
            /*width: 50%;*/

          }
        }
        h4 {
          text-align: left;
          padding: 10px 0;
          font-size: 14px;
        }
        .detail {
          display: flex;
          width: 100%;
          height: 130px;
          font-size: 14px;
          .item {
            width: 33.3%;
            height: 100%;
            border: 1px solid red;
            margin-right: 6px;
            display: flex;
            flex-direction: column;
            box-shadow: 0 1px 1px #ccc, 0 0 1px #ccc, 0 0 1px #ccc;
            .div1 {
              height: 65px;
              border: 1px solid blue;
              margin-bottom: 8px;
              box-shadow: 0 1px 10px #ccc, 0 0 1px #ccc, 0 0 1px #ccc;
            }
            .div2 {
              height: 60px;
              border: 1px solid blue;
              box-shadow: 0 1px 10px #ccc, 0 0 1px #ccc, 0 0 1px #ccc;
            }
          }
          .item1 {
            border: 0;
          }
          .item2 {
            border: 1px solid green;
          }
        }
      }
      .section2 {
        flex-shrink: 1;
        min-width: 350px;
        height: 450px;
        background-color: #fff;
        padding: 10px;
        font-size: 14px;
        width: 27%;
        display: flex;
        flex-direction: column;
        border-radius: 5px;
        padding: 10px 20px;
        .newsitem {
          flex: 1;
          overflow-y: auto;
          li {
            border-bottom: 1px solid #ccc;
            padding: 10px 0;
            display: flex;
            justify-content: space-around;
          }
          .time {
            text-align: left;
            padding-left: 70px;
            opacity: 0.7;
          }
          .item {
            display: flex;
            .div1 {
              width: 60px;
            }
            .div2 {
              flex: 1;
              cursor: pointer;
              text-align: left;
              padding-left: 10px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .div3 {
              width: 80px;
            }
          }
        }
        .button_box {
          padding: 10px 30px;
          button {
            display: inline-block;
            width: 100%;
            padding: 5px;
            background-color: #1ab394;
            color: white;
            font-size: 14px;
            border-radius: 8px;
            border: 0;
          }
        }
        .title {
          text-align: left;
          font-size: 16px;
          font-weight: bold;
          line-height: 40px;
          border-bottom: 2px solid #ccc;
          padding-left: 10px;
          span {
            background-color: #f8ac59;
            color: white;
            font-size: 14px;
            float: right;
            line-height: 15px;
            padding-right: 6px;
            border-radius: 3px;
            margin-top: 10px;
          }
        }
      }
    }
  }

  #myChart,
  #myChart2 {
    height: 300px;
  }
</style>
